<template>
  <div class="messageTemplete">
    <span>您好！我是</span>
    <el-input v-model="input" placeholder="请输入公司名称"></el-input>的
    <el-input v-model="name" placeholder="请输入姓名"></el-input>
    <p>希望与贵公司进行合作</p>
    <p>我递名片的意向是：</p>
    <el-input
      type="textarea"
      :rows="2"
      placeholder="请输入合作意向内容例：我公司主管各塑料原料。宁波ABS121等期待您的合作。"
      v-model="textarea"
    >
    </el-input>
    <p>请与我联系！</p>
    <span>我的联系方式是</span
    ><el-input v-model="contactWay" placeholder="请输入联系方式"></el-input>
    <p>谢谢！</p>

    <el-button type="primary" @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  name: "messageTemplete",
  data() {
    return {
      input: "",
      name: "",
      textarea: "",
      contactWay: "",
    };
  },
  created() {
    this.TempleteDetail();
  },
  methods: {
    async save() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.contactWay)) {
        this.$message.error("请输入正确的手机号码");
      } else if (this.input == "" || this.name == "" || this.textarea == "") {
        this.$message.error("请填写完整信息");
      } else {
        let params = {
          companyName: this.input,
          name: this.name,
          content: this.textarea,
          memberMobile: this.contactWay,
        };
        let res = await this.$apiFun.sendTemplete(params);
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "保存成功",
          });
        }
      }
    },

    async TempleteDetail() {
      let params = {};
      let res = await this.$apiFun.TempleteDetail(params);
      if (res.code == 200) {
        this.input = res.result.companyName;
        this.name = res.result.name;
        this.textarea = res.result.content;
        this.contactWay = res.result.memberMobile;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.messageTemplete {
  margin-left: 0.3rem;
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  text-align: left;

  /deep/ .el-input {
    width: 23%;
    margin: 0 0.1rem;
    .el-input__inner {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
  .el-input:nth-child(3) {
    width: 15%;
  }

  /deep/ .el-textarea {
    height: 1.5rem;
    .el-textarea__inner {
      width: 50%;
      font-size: 0.2rem;
      font-weight: 400;
      color: #999999;
      line-height: 0.3rem;
      height: 100%;
    }
  }
}
p {
  margin: 0.1rem 0;
}

/deep/ .el-button--primary {
  width: 2rem;
  height: 0.4rem;
  line-height: 0.1rem;
  background: #f42551;
  border-radius: 5px;
  border: none;
  margin-left: 15%;
  font-size: 0.16rem;
  font-weight: bold;
}
</style>